<template>
	<div class="container">
		<el-form ref="loginForm" :model="formData" :rules="rules" label-width="65px" hide-required-asterisk>
			<h2>十方智育 - 后台登录</h2>
			<el-form-item label="账号" prop="rootName">
				<el-input v-model="formData.rootName" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="rootPassword">
				<el-input v-model="formData.rootPassword" placeholder="请输入密码" type="password" show-password
					prefix-icon="el-icon-lock">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="login">登录</el-button>
				<el-button @click="resetForm">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				formData: {
					rootName: 'admin1',
					rootPassword: '123456'
				},
				rules: {
					rootName: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: 'blur'
						}
					],
					rootPassword: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							message: '长度至少 6 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			login() {
				// 先验证form表单是否满足验证规则，如果满足则调其中的方法
				// function(valid){.....} --> (valid)=>{....}
				this.$refs['loginForm'].validate((valid) => {
					if (valid) {
						// 去登录的功能
						this.$http.post('rootUser/login', this.formData)
							.then(res => {
								if (res.data.status == 200) {
									console.log(res.data.data.id);
									this.$message.success("登录成功")
									//	把登录后的数据保存到本地，用于以后使用
									sessionStorage.setItem('id', res.data.data.id)
									sessionStorage.setItem('username', this.formData.rootName)
									sessionStorage.setItem('password', this.formData.rootPassword)
									sessionStorage.setItem('role', res.data.data.rootRole)
									// 跳转页面
									this.$router.push('/main')
								} else {
									this.$message({
										showClose: true,
										message: res.data.message,
										type: 'error'
									});
								}
							})
						// alert(this.formData.root_name + " " +
						// 	this.formData.root_password);
					} else {
						this.$message({
							showClose: true,
							message: '请输入正确的账号和密码！',
							type: 'error'
						});
						return false;
					}
				});
			},
			resetForm() {
				this.$refs['loginForm'].resetFields();
			}
		}

	}
</script>
<!-- scoped： 代表当前的css样式，只作用于当前的组件中，而不是全局 -->
<style scoped="scoped">
	.container {
		height: 100vh;
		/* vh:view height*/
		background: url('../assets/1.jpg') no-repeat center;
		overflow: hidden;
		background-size: 100% 100%;
	}

	.el-form {
		width: 450px;
		margin: 150px auto;
		padding: 30px 50px;
		border-radius: 10px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background: rgba(255, 255, 255, 0.8);
	}

	h2 {
		text-align: center;
	}
</style>file:///D:/A媒体文件/风景图/1.jpg